<template>
  <div class="box">
    <el-row>
      <el-col :xs="24" :lg="12" id="todo-col">
        <el-card>
          <el-row>
            <el-col :span="24">
              <div>填报情况</div>
              <el-table :data="FillData" style="width: 100%" border height="250">
                <el-table-column prop="title" label="标题" min-width="250">
                  <template slot-scope="scope">
                    <el-link type="success" @click="onlinkFill(scope.row)">{{ scope.row.title }}</el-link>
                  </template>
                </el-table-column>
                <el-table-column prop="date" label="日期" min-width="180"> </el-table-column>
                <el-table-column prop="Progress" label="平均完成进度" min-width="180">
                  <template slot-scope="scope">
                    <el-progress class="showProgressColor" :percentage="scope.row.Progress"></el-progress>
                  </template>
                </el-table-column>
              </el-table>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
      <el-col :xs="24" :lg="12" id="todo-task">
        <el-card class="task-card">
          <div class="task-div" v-for="item in PgsData">
            <div>{{ item.name }}</div>
            <el-progress :percentage="item.pgs"></el-progress>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-row>
      <el-col :xs="24" :lg="12" id="Fill-col">
        <el-card>
          <el-row>
            <el-col :span="24">
              <div>待办工作</div>
              <el-table :data="todoData" style="width: 100%" border height="250">
                <el-table-column prop="title" label="标题" min-width="450">
                  <template slot-scope="scope">
                    <el-link type="success" @click="onlinktodo(scope.row)">{{ scope.row.title }}</el-link>
                  </template>
                </el-table-column>
                <el-table-column prop="date" label="日期" min-width="180"> </el-table-column>
              </el-table>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
      <el-col :xs="24" :lg="12" id="Fill-Echart">
        <el-card>
          <div id="main" style="width: 100%; height: 268px"></div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'Home',
  mounted() {
    this.FEcharts()
  },
  data() {
    return {
      todoData: [
        { title: '25年度XXXXXX行动（领导审批）', date: '2025-04-11' },
        { title: '25年度XXXXXX行动（主任下发）', date: '2025-04-13' },
        { title: '25年度XXXXXX行动（责任人填写）', date: '2025-04-13' }
      ],
      FillData: [
        { title: '关于2025年度XXXXXX', date: '2025-04-11', Progress: 50 },
        { title: '25年度XXXXXX会议', date: '2025-03-06', Progress: 80 },
        { title: '关于2024年度XXXXXX', date: '2024-10-11', Progress: 90 },
        { title: '24年度XXXXXX情况', date: '2027-08-6', Progress: 80 },
        { title: '24年XXXXXX事件', date: '2024-07-10', Progress: 80 }
      ],
      PgsData: [
        { name: '1', pgs: 50 },
        { name: '2', pgs: 80 },
        { name: '1', pgs: 50 },
        { name: '2', pgs: 80 },
        { name: '1', pgs: 50 },
        { name: '2', pgs: 80 },
        { name: '1', pgs: 50 },
        { name: '2', pgs: 80 },
        { name: '1', pgs: 50 },
        { name: '2', pgs: 80 },
        { name: '3', pgs: 90 }
      ]
    }
  },
  methods: {
    FEcharts() {
      // 基于准备好的dom，初始化echarts实例
      var myChart = this.$echarts.init(document.getElementById('main'))
      // 绘制图表
      myChart.setOption({
        title: {
          text: 'Stacked Line'
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['Email', 'Union Ads']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: 'Email',
            type: 'line',
            data: [10, 20, 30, 80, 90, 100],
            // 折现数据是否相加
            // stack: 'Total',
            // 是否展示圆点
            // showSymbol: false,
            // 设置圆点大小
            symbolSize: 10,
            // 折线宽度颜色
            lineStyle: {
              width: 5,
              color: '#34cc7f'
            }
          },
          {
            name: 'Union Ads',
            type: 'line',
            data: [5, 15, 40, 55, 70, 100],
            // 折现数据是否相加
            // stack: 'Total',
            // 是否展示圆点
            // showSymbol: false,
            // 设置圆点大小
            symbolSize: 10,
            // 折线宽度颜色
            lineStyle: {
              width: 5,
              color: '#53c3e5'
            }
          }
        ]
      })
    },
    onlinktodo() {
      this.$router.push('/FillPage/FillPage')
    },
    onlinkFill() {
      this.$router.push('/TaskDetails/TaskDetails')
    }
  }
}
</script>

<style scoped>
.box {
  padding: 20px;
  background-color: #fdfbf2;
}
.el-card {
  background-color: transparent;
}

.box >>> .el-table,
.el-table__expanded-cell {
  background-color: transparent;
  /* border: 1px solid #000; */
}

.box >>> .el-table th {
  background-color: transparent !important;
  /* border: 1px solid #000; */
}
.box >>> .el-table tr {
  background-color: transparent !important;
  /* border: 1px solid #000; */
}
.box >>> .el-table--enable-row-transition .el-table__body td,
.el-table .cell {
  background-color: transparent;
  /* border: 1px solid #000; */
}

#todo-col {
  padding: 0 20px 20px 0;
}
#Fill-col {
  padding: 10px 20px 0 0;
}
#todo-task {
  padding: 0 20px 20px 0;
}
#Fill-Echart {
  padding: 10px 20px 0 0;
}

.task-card {
  overflow: auto;
  height: 310px;
}
.task-div {
  padding-bottom: 15px;
}
.showProgressColor >>> .el-progress-bar__inner {
  background: linear-gradient(to right, blue, pink);
}
.box >>> .el-link {
  border-bottom: 1px solid #13ce66;
}
</style>
